<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>容器属性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .box {
            display: flex;
            width: 600px;
            height: 400px;
            margin: 50px;
            border: 1px solid #f00;
            /* justify-content  控制弹性元素主轴排列方式，主轴有剩余空间
                flex-start(默认) flex-end  center space-around space-between space-evenly
            */
            /* justify-content: center; */

            /* align-items  控制弹性元素交叉轴排列方式(单行)
                flex-start(默认) flex-end center baseline stretch(弹性元素没有高度，设定为父容器交叉轴高度 1/行数)
             */
            /* align-items: flex-end; */

            /* align-content    控制弹性元素交叉轴排列方式(多行)  主轴的justify-content
                flex-start  flex-end  center  space-around space-between space-evenly  stretch
             */
            /* align-content: flex-start; */


            /* flex-wrap        控制弹性元素是否可以换行，默认不换行
                nowrap(默认)  wrap   wrap-reverse 换行且反转(交叉轴镜像)
             */
            /* flex-wrap: wrap; */

            /* flex-direction   控制弹性容器主轴的方向
                row(默认)   row-reverse   column    column-reverse
             */
            /* flex-direction: column; */


            /* flex-flow: flex-direction flex-wrap; */
            flex-flow: column wrap;
        }

        .inner {
            width: 160px;
            height: 70px;
            background-color: #0f0;
            border: 1px solid #00f;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <!-- 
    Flex布局
        弹性容器属性
            justify-content  控制弹性元素主轴排列方式
            align-items      控制弹性元素交叉轴排列方式(单行)
            align-content    控制弹性元素交叉轴排列方式(多行)
            flex-direction   控制弹性容器主轴的方向
            flex-wrap        控制弹性元素是否可以换行，默认不换行
            flex-flow: flex-direction flex-wrap;
        弹性元素属性
            order 控制弹性元素的排列优先级，值越小，越靠前
            align-self 控制自身在交叉轴的排列方式，权重高于align-items
            flex-grow  当弹性容器主轴有剩余空间时，当前元素放大比例
            flex-shrink 当弹性容器主轴空间不足时，元素的缩小比例
            flex-basis  设定弹性元素占据主轴空间的大小
            flex: flex-grow flex-shrink flex-basis;
        
        flex-shrink/flex-basis 控制大小的比例权重低于容器内容的宽高
     -->

    <div class="box">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">5</div>
        <div class="inner">5</div>
        <div class="inner">5</div>
        <div class="inner">5</div>
    </div>
    <script type="text/javascript">
        
    </script>
</body>
</html>